<!--
 @description 表单行/单元格
 @fileName index.vue
 @author zengqiongying
 @created 2023-04-20 10:08:38
-->
<template>
  <div
    class="c-cell"
    :class="[
      cellClassName,
      { 'mini-cell': size === 'mini' },
      { 'flex-column': isColumn, 'no-border': border === false, 'divider-line': divider && border !== false }
    ]"
    @click.stop="onClick"
  >
    <div
      v-if="showTitle"
      class="label"
      :class="{
        required: required,
        black: labelBlack
      }"
    >
      {{ title }}
      <div v-if="showLabel" class="sub-label">{{ subTitle }}</div>
    </div>
    <template v-if="isInput">
      <qmp-field
        class="cus-qmp-filed"
        v-model="curValue"
        label=""
        :placeholder="placeholder"
        :required="required"
        :clickable="right"
        :readonly="readonly"
        :is-link="!!rightIcon ? false : right"
        :left-icon="leftIcon"
        :right-icon="rightIcon"
        clearable
        v-bind="$attrs"
        :input-align="inputAlign"
        @click.stop="onFoucus"
        @clear="onClearValue"
      />
    </template>
    <template v-else>
      <div class="value" :style="{ fontWeight: weight }">
        <template v-if="custom || (modelValue && `${modelValue}`.length > 0)">
          <slot>
            <div
              class="text"
              :class="[valueClassName, { ellipsis: !custom }]"
              :style="{ 'text-align': valueAlign || 'right' }"
              @click.stop="onDirection"
            >
              {{ viewValue }}
            </div>
          </slot>
        </template>
        <div
          v-else
          class="text"
          :class="[valueClassName, { placeholder: !readonly }]"
          :style="{ 'text-align': valueAlign || 'right' }"
          @click.stop="onDirection"
        >
          {{ readonly ? viewValue : placeholder }}
        </div>
      </div>
      <template v-if="right && !readonly">
        <slot name="right">
          <qmp-icon class="icon" name="arrow" @click.stop="onDirection" />
          <!-- <div class="icon icon-arrow"></div> -->
        </slot>
      </template>
    </template>
  </div>
</template>
<script lang="ts">
  import { computed, reactive, toRefs, defineComponent, watch } from 'vue'
  import type { PropType } from 'vue'
  import { getDictByType } from '@/apis/dataDict'
  const none: any[] = [undefined, null, '']
  // 定义具体的函数签名有助于更好的类型推断
  type ApiArray = () => any[]
  export default defineComponent({
    name: 'Cell',
    props: {
      title: {
        type: String,
        default: undefined
      },
      subTitle: {
        type: String,
        default: undefined
      },
      modelValue: {
        type: [String, Number, Array] as PropType<string | number | ApiArray>,
        default: ''
      },
      right: {
        type: Boolean,
        default: true
      },
      weight: {
        type: String,
        default: '400'
      },
      isColumn: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      placeholderColor: {
        type: String,
        default: ''
      },
      required: {
        type: Boolean,
        default: false
      },
      custom: {
        type: Boolean,
        default: false
      },
      border: {
        type: Boolean,
        default: true
      },
      isInput: {
        type: Boolean,
        default: false
      },
      clickInput: {
        type: Boolean,
        default: true
      },
      readonly: {
        type: Boolean,
        default: false
      },
      defaultValue: {
        type: String,
        default: '--'
      },
      dictTypeCode: {
        // 数据字典类型编码
        type: String,
        default: ''
      },
      cellClassName: {
        type: String,
        default: ''
      },
      valueClassName: {
        type: String,
        default: ''
      },
      leftIcon: {
        type: String,
        default: ''
      },
      rightIcon: {
        type: String,
        default: ''
      },
      inputAlign: {
        type: String,
        default: 'left'
      },
      valueAlign: {
        type: String,
        default: 'right'
      },
      // 是否间隔线
      divider: {
        type: Boolean,
        default: false
      },
      labelBlack: {
        type: Boolean,
        default: true
      },
      size: {
        type: String,
        default: 'small' // small/mini
      }
    },
    setup(props, ctx) {
      const datas = reactive({
        curValue: '',
        dictValue: ''
      })
      const viewValue = computed(() => {
        if (!none.includes(datas.dictValue)) {
          return datas.dictValue
        }
        if (!none.includes(props.modelValue)) {
          return props.modelValue instanceof Array ? props.modelValue.join(',') : props.modelValue
        }
        return props.defaultValue
      })
      const showLabel = computed(() => {
        return !none.includes(props.subTitle)
      })
      const showTitle = computed(() => {
        return !none.includes(props.title)
      })
      watch(
        () => props.modelValue,
        (n) => {
          if (['number', 'string'].includes(typeof n)) {
            datas.curValue = `${n}`
          } else {
            datas.curValue = ''
          }
          if (none.includes(n)) return ''
          if (none.includes(props.dictTypeCode)) return n
          let tmpArr: string[] = []
          if (!(n instanceof Array)) {
            tmpArr = `${n}`.split(',')
          } else {
            tmpArr = n
          }
          const t: any[] = []
          const params = { dictTypeCode: props.dictTypeCode }
          getDictByType(params).then((resData) => {
            for (const code of tmpArr) {
              if (!none.includes(code)) {
                for (const item of resData) {
                  if (item.dictCode.toString() === code.toString()) {
                    t.push(item.dictName)
                    continue
                  }
                }
              }
            }
            datas.dictValue = t.join(',')
          })
        },
        {
          immediate: true
        }
      )
      const $emit = ctx.emit
      const onClick = () => {
        console.log('click点击')
        $emit('click')
      }
      const onDirection = () => {
        console.log('right点击')
        $emit('right')
      }
      const onFoucus = () => {
        if (props.right || props.clickInput) {
          onDirection()
        }
      }
      const onClearValue = () => {
        datas.curValue = ''
        $emit('input', '')
        $emit('clear')
      }

      return {
        ...toRefs(datas),
        onClick,
        onFoucus,
        onDirection,
        onClearValue,
        viewValue,
        showTitle,
        showLabel
      }
    }
  })
</script>
<style lang="less" scoped>
  .c-cell {
    position: relative;
    padding: 16px 14px;
    min-height: 52px;
    box-sizing: border-box;
    background-color: var(--bg-global-weaker);
    display: flex;
    // align-items: center;
    // overflow: hidden;
    &.mini-cell {
      padding: 2px 14px;
      min-height: 24px;
    }
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      left: 16px;
      right: 16px;
      bottom: 0;
      border-bottom: 1px solid var(--divisionline-weak);
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &.no-border::after {
      border-bottom: 0;
    }
    &.divider-line::after {
      border-color: var(--divisionline-normal);
    }
    /deep/.qmp-cell--clickable:active {
      background: var(--bg-global-weaker);
    }
    /deep/.qmp-cell.cus-qmp-filed {
      --qmp-cell-line-height: 20px;
      padding: 0;
      background: transparent;
      .qmp-field__label {
        width: auto;
        min-width: 70px;
        margin-right: 16px;
        font: var(--font-main-title-body);
        color: var(--texticon-default-strong);
      }
      .qmp-field__control {
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
      }

      &.van-cell--required::before {
        left: -8px;
      }
    }
    .label {
      font: var(--font-main-title-body);
      min-width: 70px;
      line-height: 20px;
      color: var(--texticon-default-stronger);
      margin-right: 16px;
      flex: 0 0 auto;
      position: relative;
      &.required::before {
        content: '*';
        position: absolute;
        left: -8px;
        top: 3px;
        color: var(--texticon-color-error-normal);
      }
      &.black {
        color: var(--texticon-default-strong);
      }
      .sub-label {
        margin-top: 2px;
        margin-bottom: 6px;
        font: var(--font-main-body);
        color: var(--texticon-default-normal);
      }
    }
    .value {
      flex: 1 1 auto;
      overflow: hidden;
      font: var(--font-main-body);
      color: var(--texticon-default-stronger);
      text-align: right;
      .text {
        display: block;
        line-height: 20px;
        overflow: hidden;
        text-align: right;
        &.ellipsis {
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &.placeholder {
          color: var(--texticon-default-normal);
        }
        &.required {
          color: #ee0a24;
        }
      }
    }
    .icon {
      margin-left: 4px;
      flex: 0 0 16px;
      font-size: 16px;
      font-weight: bold;
      color: var(--texticon-default-normal);
    }
    .icon-arrow {
      width: 20px;
      height: 20px;
      background: url(~@/assets/images/arrow-right.png);
      background-size: 20px 20px;
    }
    &.flex-column {
      display: block;
      position: relative;
      // padding-bottom: 10px;
      .label {
        margin-bottom: 8px;
      }
      .value {
        text-align: left;
        .text {
          text-align: left;
          overflow: auto;
          text-overflow: inherit;
          white-space: normal;
        }
      }
      .icon {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>
